<template>
	<betting-record :data="data">
		<template #footer>
			<div class="text-sm text-t-4 px-1">
				<div class="flex justify-between items-center">
					<div class="label">{{ $t('betting.betId') }}:</div>
					<div class="flex-1"></div>
					<up-order-no :value="data.orderNo" />
				</div>
				<div class="flex justify-between items-center">
					<div class="label">{{ $t('betting.betTime') }}:</div>
					<div>{{ fmtDateTimeGMT(data.settledAt) }}</div>
				</div>
				<div v-if="data.status === BettingStatus.betSuccessed" class="py-1">
					<base-button
						v-if="earlySettlementStatus === SettlementStatus.available"
						:loading="loading"
						class="my-1"
						size="medium"
						type="info"
						@click="submit">
						{{ $t(`betting.earlySettlement`) }}
						<up-amount :value="earlySettlementAmount" class="ml-1" />
					</base-button>
					<base-button class="my-1" v-else size="medium" type="info">
						{{ $t(`betting.noEarlySettlement`) }}
					</base-button>
				</div>
			</div>
		</template>
	</betting-record>
</template>

<script lang="ts" setup>
import { BetType } from '@/types'
import { PropType } from 'vue'
import { BettingRecord } from '@/components/betting'
import { UpAmount } from '@/components/up'
import { BaseButton } from '@/components/base'
import { UpOrderNo } from '@/components/up'
import { fmtDateTimeGMT, t } from '@/utils'
import { SettlementStatus, BettingStatus } from '@/enums'
import { closeBet } from '@/api/betting'
import { useRequest } from '@/hooks'

const props = defineProps({
	data: {
		type: Object as PropType<BetType>,
		required: true
	},
	earlySettlementStatus: {
		type: String as PropType<SettlementStatus>,
		default: ''
	},
	earlySettlementAmount: {
		type: Number,
		default: 0
	}
})

const emits = defineEmits(['settlement'])

const { run, loading } = useRequest(closeBet, {
	showSuccess: t('betting.earlySettlementSuccess'),
	showError: t('betting.cashoutFailed'),
	onSuccess: () => {
		emits('settlement')
	}
})

const submit = () => {
	run({ betOrderId: props.data.betOrderId, earlySettlementAmount: props.earlySettlementAmount })
}
</script>
